<template>
	<view class="product-list-container" v-if="userInfo.role<=3">
		<!-- 搜索栏 -->
		<!-- <view class="search-bar">
			<input type="text" placeholder="请输入产品名称、产品编码" v-model="searchKeyword" />
			<view class="cancel-btn" @click="clearSearch">取消</view>
		</view> -->
		<!-- 选项卡 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: currentTab === 'all' }" @click="changeTab('all')">
				全部
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'online' }" @click="changeTab('online')">
				已上架
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'offline' }" @click="changeTab('offline')">
				已下架
			</view>
		</view>
		<!-- 产品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(product, index) in filteredProducts" :key="index">
				<view class="product-info">
					<image :src="product.thumb" mode="aspectFit"></image>
					<view class="info">
						<view class="product-name">{{ product.title }}</view>
						<view class="product-price">¥{{ product.price }}</view>
						<view class="product-type" :class="product.status==1?'active':''">
							{{product.status==1?'上架中':'已下架'}}
						</view>
					</view>
				</view>
				<view class="status-btn" @click="showActionSheet(product)">
					...
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				userInfo:{},
				searchKeyword: '',
				currentTab: 'all',
				products: [
				],
				statusOptions: ['下架', '上架']
			};
		},
		computed: {
			filteredProducts() {
				let result = this.products;
				if (this.searchKeyword) {
					result = result.filter(product =>
						product.name.includes(this.searchKeyword)
					);
				}
				if (this.currentTab === 'online') {
					result = result.filter(product => product.status == 1);
				} else if (this.currentTab === 'offline') {
					result = result.filter(product => product.status == 0);
				}
				return result;
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
				if(this.userInfo.role>3){
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}else{
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.getList()
		},
		methods: {
			getList() {
				request({
					url: 'index/goods-list',
					method: 'get',
					// data: { username:this.username,password:this.password,openid:uni.getStorageSync("openid")}
				}).then(res => {
					if (res.status == 200) {
						console.log(res.data)
						this.products = res.data.list
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})
			},
			clearSearch() {
				this.searchKeyword = '';
			},
			changeTab(tab) {
				this.currentTab = tab;
			},
			showActionSheet(product) {
				uni.showActionSheet({
					itemList: this.statusOptions,
					success: (res) => {
						if (!res.cancel) {
							product.status = res.tapIndex;
							this.toChange(product)
							uni.showToast({
								title: `商品${product.title}已${this.statusOptions[res.tapIndex]}`,
								icon: 'none'
							});
						}
					}
				});
			},
			toChange(product){
				request({
					url: 'index/goods-update',
					method: 'post',
					data:{
						id:product.id,
						status:product.status
					},
					// data: { username:this.username,password:this.password,openid:uni.getStorageSync("openid")}
				}).then(res => {
					if (res.status == 200) {
					uni.showToast({
						title: `商品${product.title}已${this.statusOptions[product.status]}`,
						icon: 'none'
					});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
	}

	/* 样式部分与之前保持一致 */
	.product-list-container {
		/* background-color: #f5f5f5; */
	}

	.search-bar {
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.search-bar input {
		flex: 1;
		padding: 15rpx;
		border: none;
		background-color: #f2f2f2;
	}

	.cancel-btn {
		padding: 15rpx;
		color: #999;
	}

	.tabs {
		display: flex;
		margin-bottom: 20rpx;
		background-color: white;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15rpx 0;
		color: #333;
		font-size: 30rpx;
	}

	.tab-item.active {
		color: #f56c23;
		border-bottom: 4rpx solid #f56c23;
	}

	.product-list {
		background-color: white;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.product-info {
		display: flex;
		align-items: center;
	}

	.product-info image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.product-info .info {
		display: flex;
		height: 160rpx;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 32rpx;
		color: #333;
	}

	.product-price {
		font-size: 30rpx;
		color: #f56c23;
	}

	.status-btn {
		font-size: 40rpx;
		color: #999;
	}

	.product-type {
		color: #f56c23;
		font-size: 28rpx;
	}

	.product-type.active {
		color: #16b9c6;
		font-size: 28rpx;
	}
</style>